import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../config/config.dart';
import '../../generated/assets.dart';
import '../../views/common_widget.dart';
import 'device_detail_logic.dart';

class DeviceDetailPage extends StatelessWidget {
  DeviceDetailPage({super.key});

  final logic = Get.find<DeviceDetailLogic>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Config.colorBg,
      resizeToAvoidBottomInset: false,
      body: Stack(
        children: [
          Column(
            children: [
              CommonWidget.commonAppBar("猫砂盆",
                  bg: Config.colorBg,
                  rightWidget: Icon(
                    Icons.settings,
                    size: 54.w,
                    color: Config.colorText1,
                  ),
                  callback: () {}),
              Expanded(
                child: ListView(
                    scrollDirection: Axis.vertical,
                    padding: EdgeInsets.only(top: 10.w),
                    shrinkWrap: true,
                    children: [
                      Container(
                        width: double.infinity,
                        height: 490.w,
                        margin: EdgeInsets.symmetric(horizontal: 44.w),
                        child: Stack(
                          children: [
                            Positioned(
                              left: 0.w,
                              right: 0.w,
                              child: Column(
                                children: [
                                  Container(
                                    decoration: BoxDecoration(
                                      color: Config.colorMain,
                                      borderRadius: BorderRadius.circular(8.w),
                                    ),
                                    padding: EdgeInsets.only(
                                        left: 11.w, right: 11.w, top: 3.w, bottom: 5.w),
                                    child: Text(
                                      "设备正常",
                                      style: TextStyle(
                                          color: Config.colorText1,
                                          fontSize: 18.w,
                                          fontWeight: FontWeight.w600),
                                    ),
                                  ),
                                  SizedBox(
                                    height: 15.w,
                                  ),
                                  Image.asset(
                                    Assets.imagesProduct01Big,
                                    height: 420.w,
                                    fit: BoxFit.fitHeight,
                                  ),
                                ],
                              ),
                            ),
                            Positioned(
                              left: 225.w,
                              bottom: 58.w,
                              child: Container(
                                decoration: BoxDecoration(
                                  color: Config.colorMain,
                                  borderRadius: BorderRadius.circular(8.w),
                                ),
                                padding:
                                    EdgeInsets.only(left: 11.w, right: 11.w, top: 3.w, bottom: 5.w),
                                child: Text(
                                  "空间：正常>",
                                  style: TextStyle(
                                      color: Config.colorText1,
                                      fontSize: 18.w,
                                      fontWeight: FontWeight.w600),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        width: double.infinity,
                        margin: EdgeInsets.only(top: 0.w, left: 35.w, right: 35.w),
                        padding: EdgeInsets.symmetric(horizontal: 0.w, vertical: 26.w),
                        height: 180.w,
                        decoration: BoxDecoration(
                          color: Config.colorBg2,
                          borderRadius: BorderRadius.circular(Config.roundBig.w),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              padding: EdgeInsets.only(left: 30.w),
                              child: Text(
                                "今日",
                                style: TextStyle(
                                    color: Config.colorText1,
                                    fontSize: Config.textSizeInfo.w,
                                    fontWeight: FontWeight.w600),
                              ),
                            ),
                            SizedBox(
                              height: 10.w,
                            ),
                            Row(
                              children: [
                                Expanded(
                                  child: Column(
                                    children: [
                                      RichText(
                                        text: TextSpan(
                                          text: '',
                                          style: TextStyle(
                                              fontSize: Config.textSizeInfo.w,
                                              color: Config.colorText3), // 基础样式
                                          children: [
                                            TextSpan(
                                              text: '11',
                                              style: TextStyle(
                                                  fontSize: 40.w,
                                                  color: Config.colorText1,
                                                  fontWeight: FontWeight.w600),
                                            ),
                                            TextSpan(
                                              text: '次',
                                              style: TextStyle(
                                                fontSize: 16.w,
                                                color: Config.colorText3,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      Text(
                                        "入厕",
                                        style: TextStyle(
                                          color: Config.colorText3,
                                          fontSize: Config.textSizeMinor.w,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  width: 2.w,
                                  height: 50.w,
                                  color: Config.colorDivider,
                                ),
                                Expanded(
                                  child: Column(
                                    children: [
                                      RichText(
                                        text: TextSpan(
                                          text: '',
                                          style: TextStyle(
                                              fontSize: Config.textSizeInfo.w,
                                              color: Config.colorText3), // 基础样式
                                          children: [
                                            TextSpan(
                                              text: '56',
                                              style: TextStyle(
                                                  fontSize: 40.w,
                                                  color: Config.colorText1,
                                                  fontWeight: FontWeight.w600),
                                            ),
                                            TextSpan(
                                              text: ' 秒',
                                              style: TextStyle(
                                                fontSize: 16.w,
                                                color: Config.colorText3,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      Text(
                                        "平均停留",
                                        style: TextStyle(
                                          color: Config.colorText3,
                                          fontSize: Config.textSizeMinor.w,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ]),
              ),
            ],
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              height: 166.w,
              padding: EdgeInsets.only(left: 0.w, right: 0.w, bottom: 0.w, top: 0.w),
              decoration: BoxDecoration(
                color: Config.colorBg2,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(Config.roundBig.w),
                    topRight: Radius.circular(Config.roundBig.w)),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
